<script lang="ts" setup>
defineProps({
  list: {
    type: Array,
    default: () => [],
  },
  border: {
    type: Boolean,
    default: false,
  },
})
</script>

<template>
  <up-grid
    col="3"
    :border="border"
    :align="'left'"
  >
    <up-grid-item
      v-for="(listItem,listIndex) in list"
      :key="listIndex"
      class="grid-item-container"
    >
      <up-text :text="listItem.name" color="#888888" size="28rpx" line-height="34rpx" margin="22rpx 0 0 24rpx"></up-text>
      <up-text :text="listItem.number" color="#333" size="34rpx" line-height="40rpx" margin="16rpx 0 24rpx 24rpx"></up-text>
    </up-grid-item>
  </up-grid>
</template>

<style lang="scss" scoped>
.custom-container {
  margin: 16rpx;
  background: #fff;
  border-radius: 16rpx;
}
</style>